#{extends 'main.html' /}
#{set title:'Find | Find Food' /}

#{ifErrors}
	<div class="error">
		<ul>
		#{errors}
			<li>${error}</li>
		#{/errors}
		</ul>
	</div>
#{/ifErrors}

<h2>Find</h2>

#{form @Find.doFind(kw, cat, z)}
	<div class="find-parameters">
		<p>
			<label for="kw">Keywords:</label>
			<input type="text" name="kw" id="kw" value="${kwValue}" size="60" maxlength="128" />
			<input type="submit" id="search" value="Search" class="button" />
		</p>
		<p>
			<label for="cat">Category:</label>
			<select name="cat" id="cat">
				<option value=""></option>
				#{list items:categories, as:'category' }
					#{if category.value == catValue }
						<option value="${category.value}" selected="selected">${category.name}</option>
					#{/if}
					#{else}
						<option value="${category.value}">${category.name}</option>
					#{/else}
				#{/list}
			</select>
			
			<label for="z">Zip Code:</label>
			#{if zValue }
			<input type="text" name="z" id="z" value="${zValue}" size="5" maxlength="5" />
			#{/if}
			#{else}
			<input type="text" name="z" id="z" value="${user?.home?.zipcode}" size="5" maxlength="5" />
			#{/else}
		</p>
		<div class="clear-search"><a href="@{Find.clear}">Clear Search</a></div>
	</div>
#{/form}

<div class="restaurant-list">
	<ul>
		#{if noResults }
			<li class="restaurant first noResults">No restaurants found for that query.</li>
		#{/if}
		#{else}
			#{list items:restaurants, as:'restaurant' }
				<li class="restaurant ${restaurant_isFirst ? 'first' : ''} ${restaurant_parity}">
					<span class="name">${restaurant.name}</span>
					<span class="category">${restaurant.categoryObject?.name}</span>
					<span class="improve"><a href="@{Listing.view(restaurant.docid)}">Improve Listing</a></span>
					#{if restaurant.fullAddress }
					<span class="address">
						<a href="http://maps.google.com/maps?q=${restaurant.fullAddress.urlEncode()}">${restaurant.fullAddress}</a> 
						- ${restaurant.telephone}
					</span>
					#{/if}
				</li>
			#{/list}
		#{/else}
	</ul>
</div>